<template>
    <div id="patrol-statistic">
        <!-- 巡查统计 -->
        <div class="wrapper">
            <div class="chart-box" ref="statistic1"></div>
            <div class="filter">
                <el-form :inline="false" :model="filter1" ref="filter1" class="demo-form-inline">
                    <el-form-item label="选择河湖" prop="river">
                        <el-input v-model="filter1.riverName" placeholder="请选择河湖" suffix-icon="el-icon-circle-plus-outline" @focus="showRiverSelector"></el-input>
                    </el-form-item>
                    <el-form-item label="选择年份" prop="year">
                        <el-date-picker v-model="filter1.year" format="yyyy"  value-format="yyyy" align="right" type="year" placeholder="选择年份"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否统计全部巡查员"  prop="allUser">
                        <el-radio v-model="filter1.allUser" :label="true">是</el-radio>
                        <el-radio v-model="filter1.allUser" :label="false">否</el-radio>
                    </el-form-item>
                    <el-form-item label=""  prop="">
                        <el-button class="btn" type="primary" size="mini"  @click="confirm('filter1')">查询统计</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <riverSelector ref="riverSelector" @output="getRiver"></riverSelector>
    </div>
</template>
<script>
import echarts from 'echarts'
import themeShine from '@/assets/lib/echarts/theme-shine.json'
import themeHalloween from '@/assets/lib/echarts/theme-halloween.json'
import mixin from './echarts.mixin.js'
import riverSelector from "@/components/river-selector.vue"
export default {
    mixins:[mixin],
    components:{riverSelector},
    data(){
        return{
            filter1:{
                type:'river',
                riverName:'',
                riverId:'',
                year:'',
                allUser:false,
            },
           
        }
    },

    methods:{
        showRiverSelector(){
            this.$refs.riverSelector.showRiverSelector=true
        },

        getRiver(river,riverType){
            this.$set(this.filter1,'riverName',river.name)
            this.filter1.riverId=river.id
            this.filter1.type=riverType
        },

        confirm(filter){
            if(filter==='filter1'){
                if(!this.filter1.riverName){
                    this.$message.warning("请选择河湖!")
                    return 
                }else if(!this.filter1.year){
                    this.$message.warning("请选择年份!")
                    return
                }
                this.getChartData()
            }

        },

        //根据每月巡河次数统计
        getChartData(){
            var submitData=this.filter1
            this.$http.statisticsOfPatrolNum(submitData)
            .then((res)=>{
                var data=res.data.data
                this.updateChart(data)
            }).catch((err)=>{
                throw(err)
            })

        },

        // 更新统计图表
        updateChart(data){
            var option = this.patrolChartObj.getOption();
            if(data && data.length>0){
                data.forEach((item,index)=>{
                    option.series[0].data[index]=item.count
                })
            }else{
                option.series[0].data=[0,0,0,0,0,0,0,0,0,0,0,0]
                this.$message.error("数据出错!")
            }
            this.patrolChartObj.setOption(option);  
        },
        //初始化图表
        initChart(){
            echarts.registerTheme('shine', themeShine)
            this.patrolChartObj= echarts.init(this.$refs.statistic1,'shine');
            this.patrolChartObj.setOption(this.statistic1Option) 
        },

        //初始化查询参数,查询默认河流巡查数据
        getDefaultRiver(){
            var submitData={
                current:1,
                size:1,
            }
            this.$http.getRiverList(submitData)
            .then((res)=>{
                var data=res.data.data;
                if(!data || !data.records || data.records.length===0){return}
                this.$set(this.filter1,'riverName',data.records[0].name)
                this.$set(this.filter1,'riverId',data.records[0].id)
                var year=new Date().getFullYear()
                this.$set(this.filter1,'year',year.toString())
                this.getChartData()
               
            })
        },

        
    },
    mounted(){
        this.initChart()
        this.getDefaultRiver()
        
    }


}
</script>
<style lang="scss" scoped>
#patrol-statistic{
    height: 100%;
    overflow: auto;
    
}

.wrapper{
    margin:20px 30px;
    //border:1px solid #eee;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0px #4c7bb5;
    min-height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    .chart-box{
        flex: 1;
    }
    .filter{
        flex-basis: 25%;
        margin: 10px;
        border-left:1px solid #eee;
        box-sizing: border-box;
        padding:0px 10px;
    }
}
</style>
<style lang="scss" scoped>
/deep/ .el-form-item{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    .el-form-item__label{
        min-width: 85px;
        text-align:left;
        padding-right:10px;
    }
    .el-input{
        flex:1;
    }
    .el-button{
        margin:0px 20px;

    }
    .el-radio{
        margin-right: 10px;
    }
    
}

</style>




